<template>
	<view class="center">
		<view class="user_headPhoto" >
			<image @click="avatarClick()" v-if="userInfo.avatar" :src="userInfo.avatar"></image>
			<image  v-else  src="../../static/icon/defaultAvatarUrl.png"></image>
			<view>
				<text class="user_headTitle">{{userInfo.userName}}</text>
				<text class="user_headTitle">{{userInfo.tel}}</text>
			</view>
		</view>
		<uni-list class="center-list" v-for="(sublist , index) in ucenterList" :key="index">
			<uni-list-item v-for="(item,i) in sublist" :title="item.title" link :rightText="item.rightText" :key="i"
				:clickable="true" :to="item.to" @click="ucenterListClick(item)" :show-extra-icon="true"
				:thumb="item.icon" thumb-size="sm">
				<template v-slot:footer>
					<view v-if="item.showBadge" class="item-footer">
						<text class="item-footer-text">{{item.rightText}}</text>
						<view class="item-footer-badge"></view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<view class="bottom-back" v-if="isShow">
			<uni-easyinput v-model="clientid" /> 
		</view>
		<!-- 退出/登录 按钮 -->
		<view class="bottom-back" @click="clickLogout">
			<text class="bottom-back-text">退出登录</text>
		</view>
	</view>
</template>

<script>
	import { mapGetters,mapMutations } from 'vuex';
	import base from '@/config/baseUrl';
	export default {
		data() {
			return {
				ucenterList: [
					[{
						"title": "个人信息",
						"to": '/pages/ucenter/user/userinfo',
						"icon": "/static/icon/ucenter/user.png"
					 }],
					 [{
					 	"title": "重置密码",
					 	"to": '/pages/ucenter/user/pwd-retrieve',
					 	"icon":  "/static/icon/ucenter/info.png"
					 }],
				],
				num:0,
				clientid:"",
				isShow:false,
			}
		},
		onLoad() {
		},
		computed: {
			...mapGetters({
				userInfo: 'userInfo',
				hasLogin: 'hasLogin'
			})
			// #ifdef APP-PLUS
			,
			appVersion() {
				return getApp().appVersion
			}
			// #endif
			,
			appConfig() {
				return getApp().globalData.config
			}
		},
		methods: {
			...mapMutations({
				setUserInfo: 'setUserInfo',
				logout: 'emptyUserInfo'
			}),
			clickLogout() {
				if (this.hasLogin) {
					uni.showModal({
						title: "提示",
						content: "是否退出登录?",
						cancelText: "取消",
						confirmText: "确定",
						success: res => {
							if (res.confirm) {
								this.$http.post('/logout?token='+this.userInfo.token).then(out => {
									this.logout();
									uni.navigateTo({
										url: '/pages/ucenter/user/login'
									});
								});
							}
						},
						fail: () => {},
						complete: () => {}
					});
				} else {
					uni.navigateTo({
						url: '/pages/ucenter/user/login'
					});
				}
			},
			ucenterListClick(item) {
				if (!item.to && item.event) {
					this[item.event]();
				}
			},
			async checkVersion() {
				let res = await callCheckVersion()
				console.log(res);
				if (res.result.code > 0) {
					checkUpdate()
				} else {
					uni.showToast({
						title: res.result.message,
						icon: 'none'
					});
				}
			},
			avatarClick(){
				this.num ++
				if(this.num >= 5){
					var info = plus.push.getClientInfo();
					this.clientid = info.clientid
					this.isShow = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.user_headPhoto {
		width: 750rpx;
		height: 450rpx;
		padding: 50rpx;
		padding-bottom: 80rpx;
		background-image: url(../../static/icon/headers.png);
		flex-direction: row;
		align-items: flex-end;
		
		image {			
			width: 180rpx;
			height: 180rpx;
			border-radius: 100rpx;
			border: 3px solid #f8f8f8;
		}
	}
	
	.user_headTitle {
		padding-left: 30rpx;
		display: flex;
		color: #FFFFFF;
		flex-direction: column;
		margin-bottom: 10px;
		margin-top: 5px;
	}
	
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		flex-direction: column;
	}

	page {
		background-color: #f8f8f8;
	}
	/* #endif*/

	.bottom-back {
		margin-top: 10px;
		width: 750rpx;
		height: 44px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* #ifndef APP-NVUE */
		border: none;
		/* #endif */
		border-width: 0;
		border-radius: 0;
		background-color: #FFFFFF;
	}
	
	.bottom-back-text {
		font-size: 32rpx;
		color: #2D82F6;
	}
	
	.center-list {
		margin-bottom: 30rpx;
		background-color: #f9f9f9;
	}

	.center-list-cell {
		width: 750rpx;
		background-color: #007AFF;
		height: 40rpx;
	}

	/*修改边线粗细示例*/
	/* #ifndef APP-NVUE */
	.center-list ::v-deep .uni-list--border:after {
		-webkit-transform: scaleY(0.2);
		transform: scaleY(0.2);
		margin-left: 80rpx;
	}
	
	.center-list ::v-deep .uni-list--border-top,
	.center-list ::v-deep .uni-list--border-bottom {
		display: none;
	}
	/* #endif */
	
	.item-footer {
		flex-direction: row;
		align-items: center;
	}

	.item-footer-text {
		color: #999;
		font-size: 24rpx;
		padding-right: 10rpx;
	}

	.item-footer-badge {
		width: 20rpx;
		height: 20rpx;
		/* #ifndef APP-NVUE */
		border-radius: 50%;
		/* #endif */
		/* #ifdef APP-NVUE */
		border-radius: 10rpx;
		/* #endif */
		background-color: #DD524D;
	}
</style>